<template>
  <div class="body">
    <!-- 导航栏部分 -->
    <div class="nav">
      <div class="logo">
        <img class="log-pic" src="../static/logo.png">
        <div class="logo-text">
          <span>Pet home</span><br>
          <span>宠物救助平台</span>
        </div>
      </div>
      <div class="contact">
        <img class="c-pic" @click="into(1)" src="../static/qq.png">
        <img class="c-pic" @click="into(2)" src="../static/douyin.png">
        <img class="c-pic" @click="into(3)" src="../static/微博.png">
        <img class="c-pic" @click="into(4)" src="../static/管理员.png">
      </div>
    </div>
    <hr>
    <div class="nav-t">
      <!-- 创建四个盒子 -->
      <div class="nav-r" @click="tohome">首页</div>
      <div class="nav-r" @click="toadopt">救助&领养</div>
      <div class="nav-r" @click="toabout">关于</div>
      <div class="nav-r" @click="toperson">个人信息</div>
    </div>
    <hr>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const into = (index) => {
  switch (index) {
    case 1:
      window.open("https://im.qq.com/index/", "_blank");
      break;
    case 2:
      window.open("https://www.douyin.com/search/%E5%AE%A0%E7%89%A9%E4%B9%8B%E5%AE%B6?source=switch_tab&type=user", "_blank");
      break
    case 3:
      window.open("https://www.weibo.com", "_blank");
      break
    default:
      router.push("/managelogin")
      break;
  }
}


function toperson(){
  router.push('/person')
}

function tohome(){
  router.push('/')
}

function toabout(){
  router.push('/about')
}

function toadopt(){
  router.push('/adopt')
}

</script>

<style scoped>
  .body{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-color: #fef8ea;
  }
  
  .nav-t{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    color: #03a850;
  }

  .nav-r{
    width: 20%;
    line-height: 80px;
    text-align: center;
    background: #fef8ea;
    color: #03a850;
    font-weight: bold;
    cursor: pointer;
  }
  .nav-r:hover{
    cursor:pointer;
  }
  .nav-r:hover{
    background: #03a850;
    color: white;
    font-weight: bold;
    cursor: pointer;
  }

  .contact{
    width: 200px;
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
    margin-right: 20px
  }
  .c-pic{
    width: 30px;
    height: 30px;
    margin-top: 55px;
  }
  .nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .logo{
    width: 250px;
    display:flex;
    justify-content: space-evenly;
    margin-top:20px;
    margin-left: 20px;
  }
  .log-pic{
      width: 100px;
      height: 100px;
  }
  .logo-text{
    color: #03a850;
    font-weight: bold;
    margin-top: 30px;
  }

</style>
